<template>
  <div>

    <el-row class="subNav-lottery" v-if="gameInfo">
      <button v-for="(item, index) in gameInfo " :class="nowSelectedGame.value===item.value?'subNav-lotteryBtn-selected':''" class="subNav-lotteryBtn" :key="index" @click="handleGameInfoClick(item)">
        {{item.label}}
      </button>
    </el-row>

    <el-row class="subCurrPage">
      <ul class="subCurrPage-left">
        <span>当前选中：</span>
        <span style="color:#eb6100">{{nowSelectedGame.label}}</span>
        <img src="../../../../static/agent/img/ico_arrow.png" width="15"/>
      </ul>
      <ul class="subCurrPage-right">
        <button v-for="(item, index) in realtimePt " :class="nowRtt.name===item.name?'isSelectedBtn':''" :key="index" @click="changeRtt(item)">
          {{item.name}}
        </button>
      </ul>
    </el-row>

    <el-dialog :visible.sync="dialogVisible">
        <table style="width: 100%" v-if="popupGameInfo">
          <thead>
          <tr class="totals-title">
            <th colspan="5">万千定位</th>
          </tr>
          </thead>
          <tbody>
          <tr class="totals-num">
            <td v-for="(item,index) in content_title" :key="index">
              {{item}}
            </td>
            <td>
              操作
            </td>
          </tr>
          <tr class="totals-num" v-for="(item ,index) in popupGameInfo" :key="index">
            <td>
              {{item.content}}
            </td>
            <td>
              {{item.amount}}
            </td>
            <td>
              {{item.comm}}
            </td>
            <td>
              {{item.win}}
            </td>
            <td>
              <button @click="showBuHuo($event, item)">
                补货
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <div class="myDialog" :style="'display:'+popoverVisibleID+';left:'+popoverX+'px;top:'+popoverY+'px'">
      <div v-if="subRealtime">
        <div v-if="realTimeMode === 1">
          <ul class="myDialog-title">补货单</ul>
          <ul>
            <span>类型</span>
            <span>{{subRealtime.value}}</span>
          </ul>
          <ul>
            <span>赔率</span>
            <span>{{subRealtime.odds}}</span>
          </ul>
          <ul>
            <span>金额</span>
            <span><input ref="buhuoText" type="text" v-model="myPopupamount"></span>
          </ul>
          <ul>
            <span>限额</span>
            <span>{{subRealtime.amount}}</span>
          </ul>
          <ul class="myDialog-buttonGroup">
            <button @click="paddingBtn">补出</button>
            <button @click="popoverVisibleID = 'none'">取消</button>
          </ul>
        </div>
        <div v-else>
          <ul class="myDialog-title">补货单</ul>
          <ul>
            <span>类型</span>
            <span>{{subRealtime.content}}</span>
          </ul>
          <ul>
            <span>赔率</span>
            <span>{{otherTypeBuHuoOdds}}</span>
          </ul>
          <ul>
            <span>金额</span>
            <span><input ref="buhuoText" type="text" v-model="myPopupamount"></span>
          </ul>
          <ul>
            <span>限额</span>
            <span>{{subRealtime.amount}}</span>
          </ul>
          <ul class="myDialog-buttonGroup">
            <button @click="paddingBtn">补出</button>
            <button @click="popoverVisibleID = 'none'">取消</button>
          </ul>
        </div>
      </div>
    </div>

    <el-row class="bread-nav">

      <ul class="bread-nav-lastResultInfo">
        {{realtimesInfo.period}}期
      </ul>
      <ul class="bread-nav-lastResultInfo-group1">
      <span class="bread-nav-lastResultInfo-name">
        {{nowRtt.name}}
      </span>

        <span class="bread-nav-lastResultInfo-close" v-show="isClose">
        距开奖：{{resultTime.minutes | twoDigits}}:{{resultTime.seconds | twoDigits}}
        </span>
        <span class="bread-nav-lastCloseInfo-close"  v-show="!isClose">
        距封盘：{{ closeTime.minutes | twoDigits }}:{{ closeTime.seconds | twoDigits }}
        </span>
        <span class="bread-nav-lastCloseInfo-close">
          今日输赢：{{realtimesInfo.win == null?0:realtimesInfo.win}}
        </span>
      </ul>
      <!--下拉列表-->
      <ul class="bread-nav-lastResultInfo-group2">
        <!-- 本来可以循环出来的，但火狐好像选择的时候会跳动，这样写不会跳动，暂时不知道为什么-->
          <select v-model="panSelected" @change="changeSelected">
            <option value="0">
              全部
            </option>
            <option value="1">
              A盘
            </option>
            <option value="2">
              B盘
            </option>
            <option value="3">
              C盘
            </option>
            <option value="4">
              D盘
            </option>
          </select>
          <select v-model="typeSelected" @change="changeSelected">
            <option value="1">
              实占
            </option>
            <option value="2">
              虚占
            </option>
            <option value="3">
              补货
            </option>
          </select>
          <select v-model="sortSelected" @change="changeSelected">
            <option value="1">
              按盈亏排序
            </option>
            <option value="2">
              按金额排序
            </option>
            <option value="3">
              按号码排序
            </option>
          </select>
      </ul>
      <ul class="bread-nav-lastResultInfo-group3">
        <button @click="reflashLastResult()" class="bread-nav-lastResultInfo-group3-btn">
          刷新
        </button>
        <span>
         {{requestSecond}}秒
        </span>
        <!--<span>-->
          <!--正在载入中-->
        <!--</span>-->
        <select v-model="requestInterval" @change="selectedChange">
          <option v-for="item in reflashTime" :value="item.value">
            {{item.label}}
          </option>
        </select>
      </ul>
      <ul class="bread-nav-lastResultInfo-group3">
        <span class="lastResultNum">
          {{realtimesInfo.prePeriod}}
          <span style="color:#344b50">期开奖</span>
        </span>
        <ul class="menu1">
          <div v-if="realtimesInfo.preBallNums" :class="{
                  T_PK10:nowSelectedGame.value==='bjpk10'||nowSelectedGame.value==='azlucky10'||nowSelectedGame.value==='amsc'||nowSelectedGame.value==='jsft'
                  ||nowSelectedGame.value==='amjssc'||nowSelectedGame.value==='xyft'||nowSelectedGame.value==='jssc'||nowSelectedGame.value==='amjsssc'
                  ||nowSelectedGame.value==='amssc'||nowSelectedGame.value==='hlsc'||nowSelectedGame.value==='hljssc',
                  T_KL8:nowSelectedGame.value==='bjkl8'||nowSelectedGame.value==='azlucky20',
                  T_SSC:nowSelectedGame.value==='azlucky5'||nowSelectedGame.value==='jsssc'||nowSelectedGame.value==='xjssc'
                  ||nowSelectedGame.value==='tjssc'||nowSelectedGame.value==='bsssc'||nowSelectedGame.value==='gama',
                  L_CQHLSX:nowSelectedGame.value==='cqssc',
                  T_KLSF:nowSelectedGame.value==='gdklsf'||nowSelectedGame.value==='azlucky8',XYNCTerm:nowSelectedGame.value==='cqxync',
                  T_K3:nowSelectedGame.value==='gxk3',T_11X5:nowSelectedGame.value==='gd115',T_GXKLSF:nowSelectedGame.value==='gxklsf',
                }" class="b-container">
            <div v-if="nowSelectedGame.value==='pcegg'">
              <span :class="'pc28_ball_grey_'+ realtimesInfo.preBallNums.substring(0,1)"></span><span style="margin: 7px 9px 0 9px">+</span>
              <span :class="'pc28_ball_grey_'+ realtimesInfo.preBallNums.substring(2,3)"></span><span style="margin: 7px 9px 0 9px">+</span>
              <span :class="'pc28_ball_grey_'+ realtimesInfo.preBallNums.substring(4,5)"></span><span style="margin: 7px 9px 0 9px">=</span>
              <span :class="'pc28_ball_'+ (realtimesInfo.preBallNums.substring(0,1)*1+realtimesInfo.preBallNums.substring(2,3)*1+
                realtimesInfo.preBallNums.substring(4,5)*1)"></span>
            </div>
                <!--<span :class="{pc28_ball_grey_0:nowSelectedGame.value === 'pcegg',}"></span>-->
                <b v-for="(item,index) in (realtimesInfo.preBallNums.split(','))" :key="index" class="bb" :class="`b${item}`"></b>
          </div>
        </ul>
      </ul>
    </el-row>

    <div class="contentMiddle">
      <el-row class="totals">
        <table v-if="realtimePt">
          <thead>
          <tr class="totals-title">
            <th v-for="(item,index) in realtimePt" :key="index">
              {{item.name}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="totals-num myTableTr upTable">
            <td v-for="(item,index) in realtimePt" :key="index">
              <button @click="changeRtt(item)">
                {{item.amount}}
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </el-row>

      <el-row class="content" v-if="realtime">
        <table class="top-table" v-if="realTimeMode === 1 ">
          <tr v-if="!realTimeMultiLine">
            <td v-for="(list,index) in realtime" :key="index">
              <table>
                <thead>
                <tr class="totals-title">
                  <th>
                    种类
                  </th>
                  <th>
                    赔率
                  </th>
                  <th>
                    金额
                  </th>
                  <th>
                    盈亏
                  </th>
                </tr>
                <tr class="totals-title">
                  <th colspan="4">
                    {{realtimeTitle[index]}}
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr class="totals-num myTableTr" v-for="(item ,index1) in list" :key="index1">
                  <td class="totals-num-title">
                    {{item.value}}
                  </td>
                  <td class="table-odds" :class="{'totals-num-title':(item.odds === '' || isClose)}">
                    {{item.odds}}
                  </td>
                  <td class="table-amount" :class="{'totals-num-title':(item.amount === '' || isClose)}">
                    <span class="spanA">{{item.amount}}</span>
                  </td>
                  <td class="table-balance" :class="{'totals-num-title':(item.balance === '' || isClose)}">
                    <span class="spanA">{{item.balance}}</span>
                  </td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>

          <tr v-else>
            <td v-for="(list,index) in realtime" :key="index">
              <table>
                <thead>
                <tr class="totals-title">
                  <th>
                    种类
                  </th>
                  <th>
                    赔率
                  </th>
                  <th>
                    金额
                  </th>
                  <th>
                    盈亏
                  </th>
                </tr>
                </thead>
                <tbody v-for="(subList, subIndex) in list" :key="subIndex">
                <tr class="totals-title myTableTr">
                  <th colspan="4">
                    {{realtimeTitle[index][subIndex]}}
                  </th>
                </tr>
                <tr class="totals-num" v-for="(item ,index1) in subList" :key="index1">
                  <td class="totals-num-title">
                    {{item.value}}
                  </td>
                  <td class="table-odds" :class="{'totals-num-title':(item.odds === '' || isClose)}">
                    {{item.odds}}
                  </td>
                  <td class="table-amount" :class="{'totals-num-title':(item.amount === '' || isClose)}">
                    <span class="spanA">{{item.amount}}</span>
                  </td>
                  <td class="table-balance" :class="{'totals-num-title':(item.balance === '' || isClose)}">
                    {{item.balance}}
                  </td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </table>

        <table class="top-table"  v-else>
          <thead>
          <tr class="totals-title">
            <th v-for="(list,index) in realtimeTitle" :key="index">
              {{list}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="totals-num myTableTr">
            <td v-for="(item ,index1) in realtime" :key="index1">
              {{item[index1].odds}}
            </td>
          </tr>
          <tr class="totals-num myTableTr">
            <td v-for="(item ,index1) in realtime" :key="index1" class="table-amount">
              {{item[index1].amount}}
            </td>
          </tr>
          <tr class="totals-num myTableTr">
            <td v-for="(item ,index1) in realtime" :key="index1" >
              {{item[index1].balance}}
            </td>
          </tr>
          <tr class="totals-num myTableTr">
            <td v-for="(item ,index1) in realtime" :key="index1" class="btn-td">
              <button class="paddingBtn">
                补货
              </button>
            </td>
          </tr>

          </tbody>
        </table>
      </el-row>
      <!--<el-row class="footer">-->
        <!--<ul>-->
        <!--<span>-->
          <!--快速补货:-->
        <!--</span>-->
          <!--<input type="text">-->
          <!--<input type="radio" id="yinkui" name="radio">-->
          <!--<label for="yinkui">平均盈亏</label>-->
          <!--<input type="radio" id="zhancheng" name="radio">-->
          <!--<label for="zhancheng">占成金额</label>-->
          <!--<button @click="dialogVisible = true">-->
            <!--计算补货-->
          <!--</button>-->
        <!--</ul>-->
      <!--</el-row>-->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

let interval = null
let intervalTime = null
export default {
  name: 'notice',
  computed: {
    ...mapGetters([
      'info',
      'nowSelectedGame',
      'realtime',
      'realtimeTitle',
      'realtimePt',
      'realTimeMode',
      'realTimeMultiLine',
    ]),
    closeTime() {
      const tempTime = this.formatTime(this.diffClose)
      if (parseInt(tempTime.minutes) == 0 && parseInt(tempTime.seconds) == 0) {
        this.isClose = true
      } else {
        this.isClose = false
      }
      return tempTime
    },
    resultTime() {
      return this.formatTime(this.diffResult)
    },
  },
  methods: {
    // 格式化时间
    CurentTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      let clock = year + '-'
      if (month < 10) {
        clock += '0'
      }
      clock += month + '-'
      if (day < 10) {
        clock += '0'
      }
      clock += day
      return (clock)
    },
    // 下注详情
    goNoteetails() {
      const date = this.CurentTime()

      const tempParams = {
        bt: date,
        et: date,
        settle: 2, // 默认未结算
        username: this.info.username,
        game: this.nowSelectedGame.value,
        page: 1,
        period: this.realtimesInfo.period - 2, // 默认当前期数减2
      }
      this.$store.dispatch('GetOrderBets', tempParams)
        .then(() => {
          const routeData = this.$router.resolve({
            path: '/noteDetails',
          })
          window.open(routeData.href, '_blank')
        })
    },
    // 补货按钮
    otherTypeBuHuo(value, odds) {
      const parames = {
        'game': this.nowSelectedGame.value,
        'group': value,
      }
      this.otherTypeBuHuoOdds = odds
      this.popupGameInfo = []
      this.$store.dispatch('GetMbets', parames)
        .then(response => {
          if (response.status === undefined) {
            for (const key in response) {
              if (key !== 'message') {
                this.popupGameInfo.push(response[key])
              }
            }
            this.dialogVisible = true
          } else {
          }
          alert(response.message)
        })
    },
    // 点击下拉框修改请求间隔时间
    selectedChange() {
      if (this.requestInterval === 0) {
        this.stop = true
      } else {
        this.stop = false
        clearInterval(interval)
        clearInterval(intervalTime)
        this.requestSecond = this.requestInterval
        this.setIntervalRequest()
      }
    },
    // 点击彩种重新请求参数
    handleGameInfoClick(value) {
      this.$store.commit('SET_NOW_SELECTED_GAME', value)
      const params = {
        game: value.value,
        rtt: 1,
        pan: 0, // 默认全部盘口
        type: 1, // 默认实占
        sort: 1, // 按盈亏排序
      }
      this.$store.dispatch('GetRealtime', params)
      this.$store.dispatch('GetRealtimePt', { game: this.nowSelectedGame.value })
        .then(response => {
          this.nowRtt = response[0]
        })
    },
    changeRtt(value) {
      this.nowRtt = value
      this.changeRealTime()
    },
    changeSelected() {
      this.changeRealTime()
    },
    changeRealTime() {
      const temp = {
        game: this.nowSelectedGame.value,
        rtt: parseInt(this.nowRtt.rtt),
        pan: parseInt(this.panSelected),
        type: parseInt(this.typeSelected),
        sort: parseInt(this.sortSelected),
      }
      this.$store.dispatch('GetRealtime', temp)
    },
    paddingBtn() {
      let params = {}
      if (this.realTimeMode === 1) {
        params = {
          period: this.realtimesInfo.period,
          game: this.nowSelectedGame.value,
          pan: this.panSelected,
          option: this.subRealtime.option_code,
          amount: this.subRealtime.amount,
        }
      } else {
        params = {
          period: this.realtimesInfo.period,
          game: this.nowSelectedGame.value,
          pan: this.panSelected,
          option: this.subRealtime.option,
          amount: this.subRealtime.amount,
        }
      }
      this.$store.dispatch('SetPadding', params)
        .then(response => {
          if (response.status === true) {
            this.changeRealTime()
            this.$store.dispatch('GetRealtimePt', { game: this.nowSelectedGame.value })
          }
          alert(response.message)
          console.log('补货单', response)
        })
      this.popoverVisibleID = 'none'
    },
    showBuHuo(e, item) {
      if (parseFloat(item.balance) !== 0 && !this.isClose) {
        this.popoverVisibleID = 'block'
        const screenX = document.body.clientWidth
        if (screenX - e.clientX > 100) {
          this.popoverX = e.clientX
        } else {
          this.popoverX = e.clientX - (screenX - e.clientX)
        }
        this.popoverY = e.clientY
        this.$refs.buhuoText.focus()
        this.subRealtime = JSON.parse(JSON.stringify(item))
      }
    },
    reflashLastResult() {
      this.request()
      this.changeRealTime()
    },
    setIntervalRequest() {
      interval = setInterval(async() => {
        await this.request()
        await this.changeRealTime()
        this.$store.dispatch('GetRealtimePt', { game: this.nowSelectedGame.value })
      }, 1000 * this.requestInterval)

      // 秒数自减
      intervalTime = setInterval(() => {
        this.diffClose--
        this.diffResult--
        this.requestSecond--
        if (this.requestSecond <= 0) {
          this.requestSecond = this.requestInterval
        }
      }, 1000)
    },
    async request() {
      // 获取对应游戏的当期信息
      await this.$store.dispatch('GetRealtimesInfo', { game: this.nowSelectedGame.value, _: Math.trunc(new Date().getTime() / 1000) })
        .then(response => {
          if (response) {
            this.realtimesInfo = response
            // 距离封盘
            this.diffClose = response.closeTime - response.serverTime
            // 距离开奖
            this.diffResult = response.resultTime - response.serverTime
          }
        })
    },
    seconds(diff) {
      return Math.trunc(diff) % 60
    },
    minutes(diff) {
      return Math.trunc(diff / 60) % 60
    },
    hours(diff) {
      return Math.trunc(diff / 60 / 60) % 24
    },
    days(diff) {
      return Math.trunc(diff / 60 / 60 / 24)
    },
    formatTime(diff) {
      let hours = 0
      let minutes = 0
      let seconds = 0

      if (diff > 0) {
        hours = this.hours(diff)
        minutes = this.minutes(diff)
        seconds = this.seconds(diff)
      }
      return { hours, minutes, seconds }
    },
    getGameOptions() {
      this.$store.dispatch('GetGameOptions')
        .then(response => {
          this.gameInfo = []
          for (const key in response) {
            if (key !== 'message') {
              for (const index in response[key]) {
                const temp = {
                  label: response[key][index],
                  value: index,
                }
                this.gameInfo.push(temp)
              }
            }
          }
          this.$store.commit('SET_NOW_SELECTED_GAME', this.gameInfo[0])
        })
    },
    readyBefore() {
      this.$store.dispatch('GetGameOptions')
        .then(response => {
          this.gameInfo = []
          for (const key in response) {
            if (key !== 'message') {
              for (const index in response[key]) {
                const temp = {
                  label: response[key][index],
                  value: index,
                }
                this.gameInfo.push(temp)
              }
            }
          }
          this.$store.commit('SET_NOW_SELECTED_GAME', this.gameInfo[0])
          this.request()
          const params = {
            game: this.gameInfo[0].value,
            rtt: 1,
            pan: 0, // 默认全部盘口
            type: 1, // 默认实占
            sort: 1, // 按盈亏排序
          }
          this.$store.dispatch('GetRealtime', params)
          this.$store.dispatch('GetRealtimePt', { game: this.gameInfo[0].value })
            .then(response => {
              this.nowRtt = response[0]
            })
        })
    },
  },
  watch: {
    $router(to, from) {
      clearInterval(interval)
      clearInterval(intervalTime)
    },
  },
  filters: {
    twoDigits(value) {
      if (value.toString().length <= 1) {
        return '0' + value.toString()
      }
      return value.toString()
    },
  },
  destroyed() {
    clearInterval(interval)
    clearInterval(intervalTime)
  },
  data() {
    return {
      isClose: false, // 是否已开奖
      otherTypeBuHuoOdds: 0, // 整合类的限额
      myPopupamount: 0, // 补货弹窗金额
      popupGameInfo: '', // 弹窗数据
      gameInfo: [], // 彩种数据
      now: Math.trunc(new Date().getTime() / 1000),
      date: null,
      stop: false, // 是否停止自动刷新
      diffClose: 0, // 离封盘时间戳
      diffResult: 0, // 离开奖时间戳
      requestInterval: 10, // 请求间隔秒数
      requestSecond: 10, // 显示秒数
      realtimesInfo: 0, // 当前彩种期数信息
      dialogVisible: false, // 弹出窗
      popoverVisibleID: 'none', // 补货弹出窗
      popoverX: 0, // 补货弹出窗的x轴方向上的距离
      popoverY: 0, // 补货弹出窗的Y轴方向上的距离
      content_title: [
        '内容',
        '金额',
        '退水',
        '派彩',
      ],
      content_info: [],
      totals: '',
      subRealtime: {}, //  点击盈亏的子项数据
      reflashTime: [
        {
          label: '手动',
          value: 0,
        },
        {
          label: '10秒',
          value: 10,
        },
        {
          label: '20秒',
          value: 20,
        },
        {
          label: '30秒',
          value: 30,
        },
        {
          label: '40秒',
          value: 40,
        },
        {
          label: '50秒',
          value: 50,
        },
        {
          label: '60秒',
          value: 60,
        },
        {
          label: '70秒',
          value: 70,
        },
        {
          label: '80秒',
          value: 80,
        },
        {
          label: '90秒',
          value: 90,
        },
      ],
      nowRtt: {},
      sortSelected: '1',
      sort: [{
        value: '1',
        label: '按盈亏排序',
      }, {
        value: '2',
        label: '按金额排序',
      }, {
        value: '3',
        label: '按号码排序',
      }],
      typeSelected: '1',
      type: [{
        value: '1',
        label: '实占',
      }, {
        value: '2',
        label: '虚占',
      }, {
        value: '3',
        label: '补货',
      }],
      panSelected: '0',
      pan: [{
        value: '0',
        label: '全部',
      }, {
        value: '1',
        label: 'A盘',
      }, {
        value: '2',
        label: 'B盘',
      }, {
        value: '3',
        label: 'C盘',
      }, {
        value: '4',
        label: 'D盘',
      }],
    }
  },
  mounted() {
  },
  async created() {
    await this.readyBefore()
    this.setIntervalRequest()
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    /*margin: 30px;*/
    margin: 0 5px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

table{
  width: auto;
  margin: 5px auto;
  border-collapse: collapse;
  border-spacing: 0;
}
  .bread-nav{
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-lastResultInfo{
    color:#386399;
    font-weight: bold;
    display: block;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-lastResultInfo-group1{
    float: left;
  }
  .bread-nav-lastResultInfo-group2{
    float: left;
  }
  .bread-nav-lastResultInfo-group2 select{
    vertical-align: middle;
    margin-top: -3px;
  }
  .bread-nav-lastResultInfo-group3{
    float: right;
    display: flex;
  }
.bread-nav-lastResultInfo-group3 select{
  vertical-align: middle;
  margin-top: -3px;
}
.bread-nav-lastResultInfo-group3 .menu1{
  padding-right: 10px;
}
.bread-nav-lastResultInfo-group3 .b-container{
  display: flex !important;
}
.bread-nav-lastResultInfo-group3 .bb{
  margin-top: 5px;
}
.bread-nav-lastResultInfo-group3 .lastResultNum{
  padding: 0 10px;
}
.bread-nav-lastResultInfo-group3 select{
  height:20px;
  vertical-align: middle;
  margin: 5px 10px auto auto;
}
.bread-nav-lastResultInfo-group3-btn{
  height:20px;
  margin-right: 10px;
  vertical-align: middle;
  margin-top: 5px;
  padding: 0;
}
  .bread-nav-lastResultInfo img{
    padding-top: 4px;
    padding-right:4px;
  }
  .bread-nav-lastResultInfo-name{
    margin: 0 10px;
    color: #eb6100;
    font-weight: bold;
  }
  .bread-nav-lastCloseInfo-close{
    margin: 0 10px;
    color: red;
    font-weight: bold;
  }
.bread-nav-lastResultInfo-close{
  margin: 0 10px;
  color: #097c25;
  font-weight: bold;
}

.bread-nav-select{
    height:30px;
  }
  .lastResultNum{
    font-weight: bold;
    color: #386399;
  }

.top-table{
  width: 100%
}
.top-table td{
  vertical-align: top;
}

  .totals{
    text-align: center;
  }
  .totals table{
    width: auto;
    margin: 5px auto;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .totals-title{

  }
  .totals-title th{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .totals-num:hover{
      background-color: #CAE8F6;
  }
  .totals-num td{
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
  }
  .totals-num-title{
    background: #F2F2F2
  }
  .upTable button{
    border:0;
    background-color: rgba(0, 0, 0, 0);
    color: blue;
    cursor: pointer;
  }
  .myTableTr:hover{
    background-color: #deedfe;
  }
.upTable button:hover {
  text-decoration: underline;
}
  .content table{
    width: 100%;
  }
  .footer{
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
  }
  .footer input[type="text"]{
    width: 100px;
  }
  .footer button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    border: 0px;
    background-color: #487BD1;
    border-radius: 5px;
  }
  .footer button:hover{
    background-color: #7bb1d0;
    color:#fff100;
  }

  .myDialog{
    position: absolute;
    z-index:2100;
    background-color: #FFF;
    border-left: 1px solid #B9C2CB;
    border-right: 1px solid #B9C2CB;
    font-size:13px;
    min-width:150px;
  }

.myDialog span {
  padding: 5px 10px;
}
  .myDialog span:first-child{
    border-right: 1px solid #B9C2CB;
    width:50px;
  }
  .myDialog input{
    width: 65px;
  }
  .myDialog ul{
    border-top: 1px solid #B9C2CB;
    padding: 5px 0;
  }

.myDialog ul:last-child {
  border-bottom: 1px solid #B9C2CB;
}

.myDialog-title{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    font-size:13px;
    font-weight: bold;
  text-align: center;
  }
  .myDialog-buttonGroup{
    text-align: center;
  }


.subNav-lottery{
  background-color: #3F8CDC;
}
.subNav-lotteryBtn{
  color:#FFF;
  font-size:13px;
  font-weight: bold;
  line-height: 28px;
  border:none;
  background-color: #3F8CDC;
  float: left;
  cursor: pointer;
}
.subNav-lotteryBtn:hover{
  color:#fff100;
  text-decoration: underline;
}
.subNav-lotteryBtn-selected{
  color:#fff100;
}

.subCurrPage{
  width:100%;
  display: flex;
  background-color: #d1dbed;
  height: 28px;
  font-size: 13px;
  line-height: 28px;
  padding: 0 10px;
}
.subCurrPage-left{
  font-weight: bold;
}
.subCurrPage-left img{
  margin: -2px 10px 0 10px;
  vertical-align: middle;
}
.subCurrPage-right button{
  border: 0;
  border-right: 1px solid #1f2d3d;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}
.subCurrPage-right button:last-child{
  border-right:0;
}
.subCurrPage-right button:hover{
  color:#e60012;
  text-decoration: underline;
  font-weight: bold;
}
.isSelectedBtn{
  color:#e60012;
  font-weight: bold;
}

  .contentMiddle{
    padding: 10px;
  }
  .table-odds{
    font-weight: bold !important;
    color: #2836f4 !important;
    font-size: 15px !important;
    font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
  }
  .table-amount{
    font-weight: 500 !important;
    color:#299a26 !important;
  }
  .table-balance{
    font-weight: 500 !important;
    color:#555 !important;
  }
  .btn-td{
    background-color: #F2F2F2;
  }
  .paddingBtn{
    color:blue;
    background-color: #FFF;
    border:1px #CCC solid;
  }
  .paddingBtn:hover{
    color:red;
  }

  .spanA:hover{
    text-decoration: underline;
    cursor: pointer;
  }
</style>
